<template>
  <div class="main">
    <el-breadcrumb separator-class="el-icon-arrow-right" v-show="$route.path!='/home'">
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
      <span class="line">s</span>
      <el-breadcrumb-item v-show="$route.path=='/bookinfo'||$route.path=='/booktype'">图书信息管理</el-breadcrumb-item>
      <el-breadcrumb-item v-show="$route.path=='/rukusearch'||$route.path=='/kucunsearch'||$route.path=='/chukusearch'">图书库存管理</el-breadcrumb-item>
      <!-- <el-breadcrumb-item v-show="$route.path=='/user'">用户管理</el-breadcrumb-item> -->
      <el-breadcrumb-item v-show="$route.path!='/home'">{{$route.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
    <router-view></router-view>
    <!-- 路由出口 -->
  </div>
</template>
<style scoped>
.line{
    position: absolute;
    color: #ae6642;
    border-left: 3px solid red;
    left: 10px;
}
.el-breadcrumb{ 
    height:10px; 
    padding:15px; 
    border-radius: 5px; /* 这个边框投影效果复制 element border 边框投影效果 */ 
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 
    margin-bottom: 10px; /* 让 main 下面内容里上面距离加大 点 */ 
    }
</style>